<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
			class="ant-advanced-search-form mb-4 bord">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="应用名称" name="appName">
						<a-input v-model:value="searchFormState.appName" placeholder="请输入应用名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="应用ID" name="appCode">
						<a-input v-model:value="searchFormState.appCode" placeholder="请输入应用id" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="应用来源" name="appAccess">
						<a-select ref="select" v-model:value="searchFormState.appAccess" placeholder="请选择">
							<a-select-option value="1">门户应用</a-select-option>
							<a-select-option value="2">移动端应用</a-select-option>
							<a-select-option value="1,2">双端应用</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="loadData(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<a-space style="margin-bottom: 18px">
			<a-button type="primary" @click="goAdd" v-if="hasPerm('appInfoAdd')">
				新增应用
			</a-button>
			<!-- <a-button type="primary" @click="openFormTest" v-if="hasPerm('appInfoAdd')">
				新增应用-以后的测试环境
			</a-button> -->
			<a-button type="primary" @click="impor" :loading="importLoding" v-if="hasPerm('appExport')">导出</a-button>
			<!-- <a-button danger @click="deleteBatchAppInfo()" v-if="hasPerm('appInfoBatchDelete')">删除</a-button> -->
			<!-- <a-button type="primary" @click="openForm('1')">
				新增应用-以后的生产环境
			</a-button> -->
		</a-space>
		<a-table ref="table" class="sy-table" :columns="columns" :data-source="datas" :tool-config="toolConfig"
			:pagination="false" :row-key="(record) => record.appId" :expandedRowKeys="expandedRowKeys">
			<template #expandIcon>
				<div style="display: none"></div>
			</template>

			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'operation'">
					<div style="display: flex; gap: 32px" v-if="record.testReal">
						<a v-if="record.testReal === '0'" style="width: max-content; color: #326eff"
							@click="openForm('2', record)">测试接入</a>
						<a v-if="record.testReal === '1' || record.testReal === '0'"
							style="width: max-content; color: #999">生产接入</a>
						<a v-if="record.testReal === '2'" style="width: max-content; color: #326eff"
							@click="produce(record)">生产接入</a>
						<!-- <a v-if="record.testReal === '2'" style="width: max-content; color: #326eff"
							@click="showModal(record)">下架</a> -->
						<a v-if="record.testReal === '2'" style="width: max-content; color: #326eff"
							@click="openExpanded(true, record)">更多</a>
					</div>
					<div style="display: flex; gap: 32px" v-else>
						<a-popconfirm v-if="hasPerm('masterTableDelete') && !record.testReal" title="确定要删除吗？"
							@confirm="deleteApp(record)">
							<a style="width: max-content; color: #326eff">删除</a>
						</a-popconfirm>
						<a style="width: max-content; color: #326eff" @click="showModal(record)">下架</a>
						<a style="width: max-content; color: #326eff" @click="openExpanded(true, record)">更多</a>
					</div>
				</template>
				<template v-if="column.dataIndex === 'appName'">
					<div style="display: flex; align-items: center">
						<!-- <img style="width: 30px; height: 30px; margin-right: 10px" :src="setLogo(record)" alt="" /> -->
						<a-image style="width: 30px; height: 30px; margin-right: 10px" :src="setLogo(record)"
							fallback="" />
						<div>{{ record.appName }}</div>
						<div v-if="record.appCode" style="margin-left: 8px">应用ID:{{ record.appCode }}</div>
					</div>
				</template>
				<template v-if="column.dataIndex === 'appAccess'">
					<span>
						{{ handleAppAccess(record.appAccess) }}
					</span>
				</template>
			</template>
			<template #expandedRowRender>
				<a-table :columns="innerColumns" rowKey="propertiesId" :data-source="innerData" :pagination="false"
					:row-selection="showSelect ? rowSelectionNull : { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
					bordered>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'status'">
							<span>
								{{ filStatus(record.status) }}
							</span>
						</template>
						<template v-if="column.dataIndex === 'operation'">
							<a style="color: #326eff" @click="showDetail(record)">查看</a>

							<a v-if="record.testStatus && record.testStatus === '0'"
								style="margin-left: 10px; color: #326eff" @click="testEditForm(record)">变更</a>
							<a v-if="!record.testStatus" style="margin-left: 10px; color: #326eff"
								@click="editForm(record)">变更</a>
							<a v-if="record.status == '0'" style="margin-left: 10px; color: #326eff"
								@click="upList(record)">上架</a>
							<a style="width: max-content; margin-left: 10px; color: #326eff"
								v-if="showBtn && record.tableName.includes('PC') && !record.testStatus"
								@click="mobileUp(record)">移动端上线</a>
							<!-- <a style="width: max-content; margin-left: 10px; color: #326eff" v-if="record.tableName.includes('PC') && record.isOld === '1' &&
								hasPerm('appInfoPcEdit')" @click="updatePc(record)">门户修改</a> -->
							<a-popover title="选择" trigger="click"
								v-if="hasPerm('subTableUpdate') && !record.testStatus">
								<template #content>
									<a-select v-model:value="updateValue" size="small" :options="statusDatabb"
										style="width: 100%;" placeholder="请选择"
										:fieldNames="{ label: 'name', value: 'key' }"></a-select>
									<a style="width: max-content;color: #326eff;margin: 4px auto;display: block;"
										@click="updateSub(record)">确认</a>
								</template>
								<a style="width: max-content;margin-left: 10px; color: #326eff">编辑</a>
							</a-popover>

							<a-popconfirm title="确定要删除吗？" @confirm="deleteAppZb(record)"
								v-if="hasPerm('subTableDelete') && !record.testStatus">
								<a style="width: max-content; margin-left: 10px; color: #326eff">删除</a>
							</a-popconfirm>
						</template>
						<template v-if="column.dataIndex === 'appAccess'">
							<span>
								{{ handleAppAccess(record.appAccess, record.testStatus) }}
							</span>
						</template>
					</template>
				</a-table>
			</template>
		</a-table>

		<div class=" box-pagin">
			<a-pagination show-size-changer show-quick-jumper :show-total="(total) => `共 ${total} 条`"
				v-model:current="searchFormState.current" v-model:pageSize="searchFormState.size" :total="total"
				@showSizeChange="onShowSizeChange" @change="pageNumberChange" />
		</div>
	</a-card>
	<div class="uiue-card btn" v-if="showQ">
		<a-button class="bt1" @click="cancelTakedown">取消</a-button>
		<a-button type="primary" @click="submitTakedown">确定</a-button>
	</div>
	<a-modal v-model:visible="visible" width="40vw" title="应用下架" @ok="handleOk">
		<a-form ref="modalFormRef" :model="formData" layout="vertical">
			<a-form-item name="appVersion" v-if="appNum > 0">
				<template v-slot:label>
					<div style="padding: 0 0 8px">移动端共下架{{ appNum }}个版本，分别是</div>
				</template>
				<a-input v-model:value="formData.appVersion" disabled />
			</a-form-item>
			<a-form-item name="pcVersion" v-if="pcNum > 0">
				<template v-slot:label>
					<div style="padding: 0 0 8px">门户端共下架{{ pcNum }}个HTML5版本，分别是</div>
				</template>
				<a-input v-model:value="formData.pcVersion" disabled />
			</a-form-item>
			<a-form-item label="是否清理应用数据" v-if="appNum > 0" name="clear" :rules="[{ required: true, message: '请选择' }]">
				<a-radio-group v-model:value="formData.clear" :disabled="isShowClean" :options="radioOption" />
			</a-form-item>
			<div class="zlabel" v-if="appNum > 0">
				<div>注：1.应用数据指用户在移动端应用商店中的常用应用及最近使用的展示及排序</div>
				<div>2.数据清理后，用户在移动端将无法搜索到应用，在最近使用应用及常用应用中也查看不到</div>
			</div>
			<a-form-item label="下架原因" name="reason" :rules="[{ required: true, message: '请输入内容' }]">
				<a-textarea v-model:value="formData.reason" :maxlength="200" placeholder="请输入不超过150字的下架原因" />
			</a-form-item>
		</a-form>
	</a-modal>
	<PickPeople ref="pick" @succses="setUser" v-if="roleList.length > 0" :setPersions="setPersions"
		:roleList="roleList" />
</template>

<script setup name="appinfo">
import { Modal } from 'ant-design-vue';
import { createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import tool from '@/utils/tool'
import { message } from 'ant-design-vue'
import appInfoApi from '@/api/biz/appInfoApi'
import PickPeople from '@/components/pickPeople/index.vue'
import bizRoleApi from '@/api/biz/bizRoleApi'
import appGrayscaleApi from '@/api/biz/appGrayscaleApi'
import { useRouter } from 'vue-router'
import { cloneDeep } from 'lodash-es'
import sysConfig from '@/config/index'
import store from '@/store'
const router = useRouter()
const fileUrl = import.meta.env.VITE_FILE_URL_W
onMounted(() => {
	loadData()

})
let searchFormState = reactive({
	appName: undefined,
	appAccess: undefined,
	appCode: undefined,
	current: 1,
	size: 10,
	orgId: ''
})
const searchFormRef = ref()
const pick = ref(null)
const table = ref()
const formRef = ref()
const indexShow = ref(true)
const isShowDeatil = ref(false) //详情表单显隐
const modalFormRef = ref() //下架表单校验
const total = ref(0)
const appNum = ref(0) //下架 标题数量
const pcNum = ref(0) //下架 标题数量
const appAccess = ref('') // 存储应用类型pc、移动）
const pageNumberChange = (page, pageSize) => {
	searchFormState.current = page
	searchFormState.size = pageSize
	loadData()
}
const onShowSizeChange = (current, pageSize) => {
	searchFormState.current = current
	searchFormState.size = pageSize
	loadData()
}
const setPersions = computed(() => {
	// 上架和下架
	// return appNum.value > 0 && pcNum.value > 0
	return true
})
// 单选option
const radioOption = [
	{ label: '是', value: '1' },
	{ label: '否', value: '0' }
]
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const columns = [
	{
		title: '应用信息',
		dataIndex: 'appName'
	},
	{
		title: '应用来源',
		dataIndex: 'appAccess'
	},
	{
		title: '操作',
		dataIndex: 'operation',
		width: 50
	}
]
const datas = ref([])

const innerColumns = [
	{
		title: '应用来源',
		dataIndex: 'appAccess'
	},
	{
		title: '版本号',
		dataIndex: 'version'
	},
	{
		title: '应用类型',
		dataIndex: 'appType'
	},
	// {
	// 	title: '业务流程',
	// 	dataIndex: 'lc'
	// },
	{
		title: '应用状态',
		dataIndex: 'status'
	},
	{
		title: '修改时间',
		dataIndex: 'updateTime'
	},
	{
		title: '操作',
		dataIndex: 'operation'
	}
]
const innerData = ref([])

//列表状态数据过滤
const statusData = [
	{ key: '0', name: '已临时下架', isIng: false },
	{ key: '1', name: '已上线', isIng: false },
	{ key: '2', name: '编辑中', isIng: true },
	{ key: '3', name: '升级中', isIng: true },
	{ key: '4', name: '下架中', isIng: true },
	{ key: '5', name: '灰度发布', isIng: true },
	{ key: '6', name: '取消灰度', isIng: true },
	{ key: '7', name: '恢复上架中', isIng: true },
	{ key: '8', name: '永久下架', isIng: false },
	{ key: '9', name: '未发布', isIng: false }
]
//列表状态数据过滤
const statusDatabb = [
	{ key: '0', name: '已临时下架', isIng: false },
	{ key: '1', name: '已上线', isIng: false },
	{ key: '2', name: '编辑中', isIng: true },
	{ key: '3', name: '升级中', isIng: true },
	{ key: '4', name: '下架中', isIng: true },
	{ key: '5', name: '灰度发布', isIng: true },
	// { key: '6', name: '取消灰度', isIng: true },
	{ key: '7', name: '恢复上架中', isIng: true },
	{ key: '8', name: '永久下架', isIng: false },
	{ key: '9', name: '未发布', isIng: false }
]
const filStatus = (status) => {
	return statusData.find((v) => v.key == status).name
}
// 导出
const importLoding = ref(false)
const impor = () => {
	importLoding.value = true
	const fileUrl = import.meta.env.VITE_API_BASEURL
	const path = `${fileUrl}/biz/appinfo/appExport`
	const name = '应用表.xlsx'
	const xhr = new XMLHttpRequest()
	xhr.open('get', path)
	xhr.setRequestHeader('Token', tool.data.get('TOKEN'))
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function () {
		if (this.status === 200 || this.status === 304) {
			importLoding.value = false
			const fileReader = new FileReader()
			fileReader.readAsDataURL(this.response)
			fileReader.onload = function () {
				const a = document.createElement('a')
				a.style.display = 'none'
				a.href = this.result
				a.download = name
				document.body.appendChild(a)
				a.click()
				document.body.removeChild(a)
			}
		}
	}
}
// logo显示
const setLogo = (record) => {
	let str = ''
	if (record.logo) {
		if (record.logo.includes('group')) {
			str = `${sysConfig.FULL_URL}${record.logo}`
		} else {
			str = `${fileUrl}/${JSON.parse(record.logo)[0].url}`
		}
	}
	console.log(str)
	return str
}
const openFormTest = () => {
	tool.session.remove('stepId')
	store.dispatch('setDetail', '')
	router.push({
		path: '/biz/appinfo/form',
		query: {
			formType: '',
			// 显示导入按钮
			isImport: true
		}
	})
}
//新增打开
const openForm = (type, record) => {
	tool.session.remove('stepId')
	store.dispatch('setDetail', '')
	router.push({
		path: '/biz/appinfo/testForm',
		query: {
			type,
			appId: type === '2' ? record?.appId : ''
		}
	})
}
// 生产接入
const produce = (record) => {
	tool.session.remove('stepId')
	store.dispatch('setDetail', '')
	// 删除审批类型
	tool.session.remove('approvalType')
	let str1 = record.appAccess.includes('1') ? 'PC_PROPERTIES' : ''
	let str2 = record.appAccess.includes('2') ? 'APP' : ''
	router.push({
		path: '/biz/appinfo/form',
		query: {
			formType: record.appId,
			version: '1.0',
			tableName: str1 + str2,
			isTest: true
		}
	})
}
const goPage = (item) => {
	tool.session.remove('stepId')
	store.dispatch('setDetail', '')
	// 删除审批类型
	tool.session.remove('approvalType')
	router.push({
		path: '/biz/appinfo/form',
		query: {
			formType: item.appId,
			version: item.version,
			tableName: item.tableName
		}
	})
}
//测试应用变更
const testEditForm = (item) => {
	const str = statusData.find((v) => v.key === item.status).name
	if (item.status != '1') {
		message.warning(`此应用${str},不可以变更`)
		return false
	}
	if (innerData.value.some((v) => v.status != '1')) {
		message.warning(`此应用存在在途工单,不可以变更`)
		return false
	}
	router.push({
		path: '/biz/appinfo/testForm',
		query: {
			type: '2',
			appId: item.appId,
			revise: true,
			tableName: item.tableName
		}
	})
}
//编辑变更
const editForm = (item) => {
	const str = statusData.find((v) => v.key === item.status).name
	if (item.status != '1') {
		message.warning(`此应用${str},不可以变更`)
		return false
	}
	if (innerData.value.some((v) => v.status != '1')) {
		message.warning(`此应用存在在途工单,不可以变更`)
		return false
	}
	goPage(item)
	// if (item.isOld && item.isOld === '1') {
	// 	// 如果是存量数据
	// 	if (isRequist.value) {
	// 		// 如果存在pc且状态不是在途工单
	// 		if (!item.tableName.includes('PC_')) {
	// 			// 如果点击更改的不是pc
	// 			appGrayscaleApi.findhd({ appCode: item.appCode }).then(r => {
	// 				if (r) {
	// 					goPage(item)
	// 				} else {
	// 					message.warning(`请先上传门户端全量灰度名单`)
	// 					return false
	// 				}
	// 			})
	// 		} else {
	// 			goPage(item)
	// 		}

	// 	} else {
	// 		goPage(item)
	// 	}
	// } else {
	// 	goPage(item)
	// }
}
const arrUpdate = [
	{ tableName: 'PC', type: 'pc' },
	{ tableName: 'APP', type: 'html' },
	{ tableName: 'ANDROID', type: 'android' },
	{ tableName: 'IOS', type: 'ios' },
	{ tableName: 'UMAP', type: 'umap' },
]
// 主表删除
const deleteApp = async (record) => {
	const params = [{ appId: record.appId }]
	let bool = await appInfoApi.deleteApp(params)
	loadData()
}
// 子表删除
const deleteAppZb = async (record) => {
	const obj = arrUpdate.find(v => record.tableName.includes(v.tableName))
	const params = { id: record.propertiesId, type: obj.type }
	let bool = await appInfoApi.deleteAppZb(params)
	if (bool) {
		expandedRowKeys.value = []
		loadData()
	}
}
const updateValue = ref()
// 子表编辑
const updateSub = async (record) => {
	if (!updateValue.value) return
	const obj = arrUpdate.find(v => record.tableName.includes(v.tableName))
	const params = { id: record.propertiesId, type: obj.type, status: updateValue.value }
	let bool = await appInfoApi.subTableEdit(params)
	if (bool) {
		expandedRowKeys.value = []
		loadData()
	}
}

// form表单提交成功
const successful = () => {
	indexShow.value = true
	loadData()
}
//列表
const loadData = (bool) => {
	if (bool) searchFormState.current = 1
	return appInfoApi.appInfoPage(searchFormState).then((data) => {
		if (data) {
			datas.value = data?.records
			total.value = data?.total
			searchFormState.current = data?.current
			searchFormState.size = data?.size
		}
	})
}

// 表单数据
const formData = reactive({
	clear: '',
	reason: '',
	approvalUsers: []
})

// 下架
const visible = ref(false)
// 列表选择的数据key数组
const selectedRowKeys = ref([])
// 列表已选择的所有数据集合
const selectedRows = ref([])
const onSelectChange = (rowKeys, rows) => {
	selectedRowKeys.value = rowKeys
	selectedRows.value = rows
}
const showQ = computed(() => {
	return selectedRowKeys.value.length > 0 ? true : false
})

const rowSelectionNull = null
const showSelect = ref(true)
const showModal = async (item) => {
	const { appId } = item
	// 判断点击下架的应用是否展开，如果展开啥也不干
	const bool = innerData.value.some((v) => v.appId === appId)
	if (!bool) return
	// 选择框显示隐藏
	showSelect.value = !showSelect.value
}
const isShowClean = ref(false)
const submitTakedown = () => {
	let appVersions = []
	let pcVersions = []
	let showMod = false
	let bo = false
	selectedRows.value.forEach((v) => {
		if (v.testStatus && v.testStatus === '0') {
			// 存在测试应用
			bo = true
		}
	})
	if (bo) {
		message.warning('您选择的应用存在测试应用，不可以下架')
		return false
	}


	const bool = innerData.value.some((v) => v.status != '1')
	if (bool) {
		message.warning('您的应用存在在途流程，不可以下架')
		return false
	}
	if (selectedRows.value.length == 1 && selectedRows.value[0].tableName === 'PC_PROPERTIES' && innerData.value.length > 1) {
		Modal.confirm({
			title: '提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: '请确认是否仅下架门户端应用',
			okText: '确认',
			onOk() {
				showMod = true
				visible.value = true
			}
		});
	} else {
		showMod = true
	}
	selectedRows.value.forEach((v) => {
		if (v.tableName == 'PC_PROPERTIES') {
			pcVersions.push(v.version)
			formData.pcVersion = pcVersions.join(',')
		} else {
			appVersions.push(v.version)
			formData.appVersion = appVersions.join(',')
		}
	})
	appNum.value = appVersions.length
	pcNum.value = pcVersions.length
	// 如果选中的移动端和所有的移动端数量相等， 清除disabled 默认为0
	const proArr = innerData.value.filter((v) => {
		// 去除测试的应用
		return !v?.testStatus
	})
	if (appVersions.length == proArr.filter((v) => !v.tableName.includes('PC')).length) {
		isShowClean.value = false
	} else {
		isShowClean.value = true
		formData.clear = '0'
	}
	if (showMod) {
		visible.value = true
	}
}
const cancelTakedown = () => {
	selectedRowKeys.value = []
	selectedRows.value = []
}

const handleOk = () => {
	modalFormRef.value
		.validate()
		.then(() => {
			let str = ''
			if (appNum.value > 0 && pcNum.value > 0) {
				str = '1,2'
			} else if (appNum.value > 0) {
				str = '2'
			} else if (pcNum.value > 0) {
				str = '1'
			}
			if (pick.value) {
				visible.value = false
			}

			getRoleList({ type: '3' }, str)
		})
		.catch(() => {
			console.log('失败')
		})
}

//查看详情主表
const showDetail = (item) => {
	tool.data.remove('currentName')
	tool.session.remove('doneStatus')
	let bool = false
	if (item.testStatus && item.testStatus === '0') bool = true
	router.push({
		path: '/biz/appinfo/detail',
		query: {
			appId: item.appId,
			propertiesId: item.propertiesId,
			tableName: item.tableName,
			approvalType: item.status,
			isTest: bool ? true : ''
		}
	})
}
// 移动端上线
const mobileUp = (record) => {
	if (innerData.value[0].status === '0') {
		// 临时上架的提示
		message.warning('门户端应用上架后可新建移动端应用，如有问题可联系运营组：hqs-swxreq@chinaunicom.cn')
		return false
	}
	router.push({
		path: '/biz/appinfo/mobile',
		query: {
			appId: record.appId,
			tableName: 'PC_PROPERTIES'
		}
	})
	// if (record.isOld && record.isOld === '1') {
	// 	// 如果是存量数据
	// 	appGrayscaleApi.findhd({ appCode: record.appCode }).then(r => {
	// 		if (r) {
	// 			router.push({
	// 				path: '/biz/appinfo/mobile',
	// 				query: {
	// 					appId: record.appId,
	// 					tableName: 'PC_PROPERTIES'
	// 				}
	// 			})
	// 		} else {
	// 			message.warning(`请先上传门户端全量灰度名单`)
	// 			return false
	// 		}
	// 	})
	// } else {
	// 	router.push({
	// 		path: '/biz/appinfo/mobile',
	// 		query: {
	// 			appId: record.appId,
	// 			tableName: 'PC_PROPERTIES'
	// 		}
	// 	})
	// }

}
// 存量数据修改pc配置信息
const updatePc = (record) => {
	router.push({
		path: '/biz/appinfo/protal',
		query: {
			appId: record.appId,
			tableName: 'PC_PROPERTIES'
		}
	})
}

//应用接入数据处理
const handleAppAccess = (item, testStatus) => {
	let str
	// //1门户 移动
	if (item) {
		const arr = item.split(',')
		str = arr.map((item) => {
			if (item == '1') {
				item = '门户应用'
			} else {
				item = '移动端应用'
			}
			if (testStatus && testStatus === '0') {
				item = '【测试】' + item
			}
			return item
		})
	} else {
		str = []
	}
	return str.join(' , ')
}
const showBtn = ref(false)
const isRequist = ref(false)

// 获取应用属性信息
const queryPropertieList = async (appId) => {
	innerData.value = await appInfoApi.queryProperties({ appId })
	// let ss = await appInfoApi.getdetailByappId({ appId })
	// 判断是不是显示移动端上线
	if (innerData.value.length == 1) {
		const arr = ['0', '1']
		let bool = innerData.value[0].tableName.includes('PC') && arr.includes(innerData.value[0].status)
		showBtn.value = bool ? true : false
	}
	if (innerData.value.length > 1) {
		// 如果存在PC并且不是在途工单, 并且其余的里面不存在 h5 并且都是永久下架或临时下架状态
		// 0、1、8都不是在途工单
		const unIng = ['0', '1', '8']
		let isPc =
			innerData.value.some((v) => v.tableName.includes('PC')) &&
			unIng.includes(innerData.value.find((v) => v.tableName.includes('PC')).status)
		isRequist.value = isPc
		let isApp = innerData.value.some((v) => v.tableName.includes('APP'))

		const qArr = innerData.value.filter((v) => !v.tableName.includes('APP') && !v.tableName.includes('PC'))
		let bool = qArr.every((v) => v.status == 0 || v.status == 8)

		if (isPc && !isApp && bool) {
			showBtn.value = true
		} else {
			showBtn.value = false
		}
	}
}
//表格展开 收起
const expandedRowKeys = ref([])
// 应用范围，下架的时候选人用
const appRange = ref('')
const openExpanded = (expanded, record) => {
	// 只展开一行
	if (expandedRowKeys.value.length > 0) {
		//进这个判断说明当前已经有展开的了
		//返回某个指定的字符串值在字符串中首次出现的位置，下标为0
		let index = expandedRowKeys.value.indexOf(record.appId)
		if (index > -1) {
			//如果出现则截取这个id,1d到1相当于0，针对重复点击一个
			expandedRowKeys.value.splice(index, 1)
		} else {
			//如果没出现则截取所有id,添加点击id，0到1，针对已经有一个展开，点另一个会进入判断
			expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
			expandedRowKeys.value.push(record.appId)
		}
	} else {
		//数组长度小于0，说明都没展开，第一次点击，id添加到数组，数组有谁的id谁就展开
		expandedRowKeys.value.push(record.appId)
	}
	appRange.value = record.appRange

	if (expanded) {
		// 子列表不显示多选框, 清除列表选择
		showSelect.value = true
		selectedRowKeys.value = []
		selectedRows.value = []
		queryPropertieList(record.appId)
	}
}
// 下架
const delist = () => {
	appInfoApi.delist(formData).then(() => {
		// 成功之后刷新列表
		loadData()
	})
}

// 获取选人组件的角色
let roleList = ref([])
const getRoleList = async (params, searchKey) => {
	// 下架和编辑需要上传归属
	const para = { appRange: appRange.value }
	const query = await appInfoApi.getFlow({ ...para, ...params })
	const obj = {
		roleId: query.flow,
		searchKey: searchKey,
		appId: selectedRows.value[0] ? selectedRows.value[0].appId : isUp.value.appId
	}
	roleList.value = await bizRoleApi.getList(obj)
	if (roleList.value.length == 0) {
		Modal.confirm({
			title: '提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: '当前环节无可选人员，请联系双门户管理员hqs-swxreq@chinaunicom.cn',
			okText: '确认',
			cancelText: '取消',
		});
	}
	if (pick.value) {
		pick.value.setVisible(true)
	}

}
const isUp = ref()
// 上架
const upList = (record) => {
	isUp.value = cloneDeep(record)
	getRoleList({ type: '3' }, isUp.value.appAccess)
}
const upList1 = () => {
	const params = {
		id: isUp.value.propertiesId,
		appId: isUp.value.appId,
		appType: isUp.value.appAccess,
		approvalUsers: isUp.value.approvalUsers
	}
	appInfoApi.uplisting(params).then(() => {
		// 成功之后刷新列表
		selectedRowKeys.value = []
		selectedRows.value = []
		expandedRowKeys.value = []
		loadData()
	})
}

// 人员选择完成
const setUser = (user) => {
	if (visible.value) {
		const config = [
			{ txt: '门户Html', key: '1', type: 'appInfoPcPropertiesEditParam' },
			{ txt: '移动端Html', key: '2', type: 'appInfoAppPropertiesEditParam' },
			{ txt: 'Android', key: '3', type: 'appInfoAndroidPropertiesEditParam' },
			{ txt: 'IOS', key: '4', type: 'appInfoIosPropertiesEditParam' },
			{ txt: '移动端UMAP', key: '5', type: 'appInfoUmapPropertiesEditParam' }
		]
		selectedRows.value.forEach((v) => {
			config.forEach((s) => {
				if (v.appAccess === s.key) {
					if (!formData[s.type]) {
						formData[s.type] = []
					}
					v.id = v.propertiesId
					v.appVersion = v.version
					formData[s.type].push(v)
				}
			})
		})
		formData.appId = selectedRows.value[0].appId
		showSelect.value = true
		selectedRowKeys.value = []
		selectedRows.value = []
		expandedRowKeys.value = []
		formData.approvalUsers = user

		visible.value = false
		pick.value.setVisible(false)
		delist()
	} else {
		isUp.value.approvalUsers = user
		pick.value.setVisible(false)
		upList1()
	}
}
const goAdd = () => {
	const env = sysConfig.NODE_ENV
	if (env === 'testing') {
		openFormTest()
	}
	if (env === 'development' || env === 'production') {
		openForm('1')
	}
}
</script>
<style lang="less" scoped>
.bord {
	border-bottom: 1px solid rgb(229, 229, 229);
}

.zlabel {
	color: rgb(245, 63, 63);
	font-size: 12px;
	margin-bottom: 10px;
}

.box-pagin {
	margin-top: 24px;
	text-align: right;
}

.btn {
	text-align: right;
	margin-top: 10px;

	.bt1 {
		margin-right: 10px;
	}
}
</style>
<style>
.sy-table .ant-table-thead>tr>th:nth-child(3)::before {
	width: 0 !important;
}
</style>
